import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'dva'
import {Card} from 'antd'
import {routerRedux} from 'dva/router'
import {Page} from 'components'
import queryString from 'query-string'
import Filter from './components/Filter'
import List from './components/List'


const EmpAchievement = ({ location, dispatch, loading, empAchievement }) => {
  const { query, pathname } = location
  const { list, employees, departments, dimension } = empAchievement
  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery
      })
    }))
  }

  const filterProps = {
    filter: {
      ...query
    },
    departments,
    employees,
    handleSearch(key) {
      if (key) {
        dispatch({
          type: 'empAchievement/searchEmp',
          payload: {
            key,
          },
        })
      }
    },
    dimension,
    onFilterChange(value) {
      handleRefresh({
        ...value,
        current: 1
      })
    },
    handleOnChange(value) {
      dispatch({
        type: 'empAchievement/updateDimension',
        payload: {
          dimension: value
        }
      })
    }
  }

  const listProps = {
    rowKey: 'id',
    dataSource: list,
    loading: loading.effects['empAchievement/query'],
    pagination: false,
    location
  }

  return (
    <div>
      <Card style={{ marginBottom: 12 }}>
        <Filter {...filterProps} />
      </Card>
      <Page inner>
        <List {...listProps} />
      </Page>
    </div>
  )
}

EmpAchievement.propTypes = {
  performancesOfComposite: PropTypes.object,
  location: PropTypes.object,
  loading: PropTypes.object
}
export default connect(({ empAchievement, loading }) => ({ empAchievement, loading }))(EmpAchievement)
